<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
<script>
  // Object.defineProperty// 不兼容IE8
  var obj = {};

  // obj.name = 666
  // Object.defineProperty(obj,'name',{
  //   value:666,
  //   enumerable:false,// 是否可枚举， 是否能够循环的到  默认false
  //   // writable:false, // 是否可以更改 默认不可改写 
  //   // configurable:false // 是都可删除  delete  默认不可删除
  // });
  var t=666;
  Object.defineProperty(obj,'name',{
    // 数据劫持
    get(){
      //当name被调用的时候  会触发 这个 get；调用时 获取到的值 是 这个函数的返回值
      console.log('get')
      return t
    },
    set(val){
      // 当name属性被赋值的时候 会触发 这个set  val对应的就是给name赋予的哪个值
      console.log('set',val)
      t = val;
    }
  });

  // Proxy
  var  obj2 = {
    name:123,
    age:456,
    sex:7777,
    a:{
      qqq:123
    }
  }
  var tempObj2 = new Proxy(obj2,{
    get(target,key){
      // target就是 obj2
      // key 就是我们调用的对应的属性的名字
      console.log('get',arguments)
      return target[key]
    },
    set(target,key,val){
      console.log('set')
      target[key] = val
    }
  });
  // Proxy 优势  不用挨个属性进行劫持


</script>